<template>
  <div class="">
    <van-form @submit="onSubmit">
      <van-field name="uploader" label="头像">
        <template #input>
          <van-uploader
            v-model="uploader"
            :after-read="afterRead"
            :max-count="1"
          />
        </template>
      </van-field>
      <van-field
        v-model="nickName"
        name="nickName"
        label="昵称"
        placeholder="昵称"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="username"
        name="userName"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit"
          >注册</van-button
        >
      </div>
      <div style="margin: 16px;">
        <van-button
          round
          block
          type="default"
          @click="$router.push({ path: '/login' })"
          >已有账号？去登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { reqRegisterAPI } from "../../api/user";
import Vue from "vue";
import { Toast } from "vant";

Vue.use(Toast);
export default {
  data() {
    return {
      nickName: "",
      username: "",
      password: "",
      uploader: [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    async onSubmit(values) {
      console.log(values);
      // console.log(values.uploader[0].content); //上传的图片地址
      // console.log(this.uploader);
      let data = {
        userName: values.userName,
        password: values.password,
        nickName: values.nickName,
        avatar: values.uploader[0].content, //头像
      }; //要传递的数据
      console.log(data);
      const result = await reqRegisterAPI(data);
      // const result = await this.$http.post(
      //   "http://localhost:3009/api/v1/auth/reg",
      //   data
      // );
      console.log(result);
      if (result.code == "success") {
        Toast.success("注册成功");
        this.$router.push({ path: "/login" }); //跳转到登录页面
      }
    },
    // 点击后，文件上传
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
  },
  created() {},
  mounted() {},
  components: {},
};
</script>
<style scoped></style>
